<template>
	<view class="rui-menu">
		<view class="rui-menu_item" :style="customStyle" v-for="(item, index) in list" :key="index" @tap="change(item)">
			<view class="rui-menu_item_icon">
				<image class="rui-menu_item_image" :src="item.icon" mode=""></image>
			</view>
			<view class="rui-menu_item_name">{{item.name}}</view>
		</view>
	</view>
</template>
<script setup>
	import {
		ref
	} from "vue"
	const props = defineProps({
		col: {
			type: Number,
			default: 4
		},
		list: {
			type: Array,
			default: []
		}
	})
	
	const emits = defineEmits(['change'])
	const change = (data) => {
		emits('change', data)
	}
	
	const customStyle = {
		width: (100 / props.col) + '%'
	}
</script>
<style lang="scss" scoped>
	.rui-menu {
		display: flex;
		align-items: center;
		flex-wrap: wrap;

		&_item {
			text-align: center;
			padding: 15rpx 0;
			border-radius: 10rpx;
			&:active{
				background: rgba(0,0,0,.1);
			}

			&_image {
				height: 80rpx;
				width: 80rpx;
			}

			&_name {
				font-size: 24rpx;
				color: #555;
			}
		}
	}
</style>